<template>
  <div class="tw-main">
    <div class="screen">
      <ul class="teach-message-title">
        <li v-for="(item,index) in hero" v-bind:key="item.id" :class="{'teach-message-active':index===titleNumFlag}" @click="ChageitleNumFlag(index,item.labelName)">
          <div class="xlabel">{{item.label}}</div>
          <div class="teach-message-number">{{item.value}}</div>
        </li>
      </ul>
      <el-row class="tw-grid">
        <el-col :span="tsLgWidth" :lg="tsLgWidth" class="tw-grid__left">
          <tw-card
          :heightCard="'405px'"
          :label="'学历'"
          >
           <tw-chart
            :chartOption="baroption2.chartOption"
            :dataset="baroption2.dataset"
            :chartDataMaps="baroption2.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="tsLgWidth" :lg="tsLgWidth" :class="{'tw-grid__middle':tsLgWidth===8,'tw-grid__right':tsLgWidth===12}">
          <tw-card
          :heightCard="'405px'"
            :label="'教师变动'">
          <tw-chart
            v-if="pjdata.length>0&&pjdata[1].length>0"
            :options='option'
            @pieselectchanged="pieselectchanged"
            height='302px'
          >
          </tw-chart>
          <div v-else style="width:100%;height:100%;text-align: center;margin-top: 25%;">
            暂无数据
          </div>
          </tw-card>
        </el-col>
        <el-col :span="8" :lg="8" class="tw-grid__right" v-if="titleNumFlag!==6">
          <tw-card
          :heightCard="'405px'"
          :label="'年龄分布'"
          >
           <tw-chart
              :dataset="radar.dataset"
              :chartOption="radar.chartOption"
              :chartDataMaps="radar.chartDataMaps"
              height='302px'
            >
            </tw-chart>
          </tw-card>
        </el-col>
      </el-row>
      <el-row class="tw-grid">
        <el-col :span="xqLogWigth" :lg="xqLogWigth" class="tw-grid__left">
          <tw-card
          :heightCard="'405px'"
            :label="'职称'">
            <tw-chart
            :chartOption="baroption3.chartOption"
            :dataset="baroption3.dataset"
            :chartDataMaps="baroption3.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="8" :lg="8" class="tw-grid__middle" v-if="isXQshow">
          <tw-card
          :heightCard="'405px'"
          :label="'生师比'">
          <tw-chart
            :chartOption="baroption1.chartOption"
            :dataset="baroption1.dataset"
            :chartDataMaps="baroption1.chartDataMaps"
            height='302px'>
          </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="xqLogWigth" :lg="xqLogWigth"  class="tw-grid__right">
          <tw-card
          :heightCard="'405px'"
            :label="'男女比例'">
          <tw-chart
            :chartOption="baroption4.chartOption"
            :dataset="baroption4.dataset"
            :chartDataMaps="baroption4.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import TwCard from '@/components/TwCard.vue'
import TwChart from '@/components/TwChart.vue'
export default{
  created () {
    let date = new Date()
    // this.tjnf = (date.getFullYear() - 1) + ''
    this.baroption1 = JSON.parse(JSON.stringify(this.line))
    this.baroption2 = JSON.parse(JSON.stringify(this.line))
    this.baroption3 = JSON.parse(JSON.stringify(this.line))
    this.baroption4 = JSON.parse(JSON.stringify(this.line))

    this.teachInitData()
  },
  props: [],
  data () {
    return {
      xqLogWigth: 8,
      tsLgWidth: 8,
      tjnf: 2019,
      reduceList: [],
      sumList: [],
      isXQshow: true,
      titleNumFlag: 0, // 头部初始化默认数据
      hero: [],
      radar: {
        dataset: [],
        chartOption: {
          color: ['#1592fe', '#00e2fe', '#ffdc85'],
          tooltip: {},
          legend: {
            show: true,
            top: '0%',
            textStyle: {
              fontSize: 16
            }
          },
          radar: {
            shape: 'circle',
            name: {
              textStyle: {
                borderRadius: 3,
                padding: [3, 5],
                fontSize: 16
              }
            },
            indicator: [],
            center: ['50%', '55%'],
            radius: '70%'
          },
          series: []
        },
        chartDataMaps: []
      },
      baroption1: {},
      baroption2: {},
      baroption3: {},
      baroption4: {},
      line: {
        chartOption: {
          color: ['#1890fe', '#00e1f9', '#ffe983', '#85e2b6', '#7e75f6', '#f96c7c'],
          tooltip: {
            show: true,
            trigger: 'item',
            axisPointer: {
              // type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: true,
            top: 0,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '25%',
            left: '3%',
            right: '1%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 16,
              interval: 0
            },
            data: []
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                fontSize: 16
              },
              splitLine: {
                opacity: 0.12
              },
              axisLine: {
                // lineStyle: '#fff'
              }
            }
          ],
          series: []
        },
        chartDataMaps: [],
        dataset: []
      },
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '教师变动',
            type: 'pie',
            color: ['#08f', '#fb6c84'],
            selectedMode: 'single',
            avoidLabelOverlap: true,
            radius: [0, '40%'],
            center: ['50%', '55%'],
            label: {
              normal: {
                position: 'inner',
                fontSize: 16
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          },
          {
            name: '教师变动',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
              normal: {
                fontSize: 16,
                formatter: '{b}:{d}%'
              }
            },
            data: []
          }
        ]
      },
      pjdata: []
    }
  },
  components: {
    TwCard,
    TwChart
  },

  mounted () {
    // this.initData1()

    //  师生基础比例
    this.teachStuDataInit()

    // 男女比例
    this.manGirdInit()

    // 职称
    this.titleInit()

    // 年龄分布
    this.ageInit()

    // 教师变动
    this.teachChageInit()

    // 学历数据
    this.educationInit()
  },
  methods: {

    /**
     * 切换头部样式
    */
    ChageitleNumFlag (index, lable) {
      // this.isXQshow = index !== 1 //去除学前隐藏逻辑
      this.titleNumFlag = index
      // this.xqLogWigth = index === 1 ? 12 : 8
      this.tsLgWidth = index === 6 ? 12 : 8
      this.educationInit(lable)
      this.teachChageInit(lable)
      this.ageInit(lable)
      this.titleInit(lable)
      this.manGirdInit(lable)
        console.log(lable)
      if (lable === '总计' || lable === '特殊'|| lable === '幼儿园') {
        this.teachStuDataInit(lable)
      } else if (lable === '中职') {
        this.zzTeachInit(lable)
      } else {
        this.subjDataInit(lable)
      }
    },

    // 中职阶段 师生基础比例
    zzTeachInit (jyjdRoute = '中职') {
      var newConditions = [{
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }, {
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: [this.tjnf],
        prepender: 'AND'
      }]
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_xkzrjs`, {conditions: newConditions}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let testData = []
          let toolTip = this.baroption1.chartOption.tooltip
          let xAxis = this.baroption1.chartOption.xAxis // 控制横轴的 显示是否斜着排布
          let legend = this.baroption1.chartOption.legend // 控制 图例的显示
          let yAxis = this.baroption1.chartOption.yAxis
          legend.show = false
          yAxis[0].type = 'log'
          yAxis[0].axisLabel.color = '#fff'
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + datas.value + ' : 1'
            return res
          }
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 40
          }

          let chartDataMaps = [
            {
              'name': '总计',
              'dataKey': 'value'
            }]
          pageInfo.list.forEach(el => {
            testData.push({
              name: el.xk,
              value: 0
            })
          })
          pageInfo.list.forEach(el => {
            testData.forEach(item => {
              if (el.xk === item.name) {
                item.value = (el.jssl && el.xssl) ? (el.xssl / el.jssl).toFixed(0) - 0 : 0
              }
            })
          })
          testData.forEach(el => {
            if (!el.value) {
              el.value = 1
            }
          })
          this.baroption1.dataset = testData
          this.baroption1.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 20,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })
    },

    // 其他学段的接口
    subjDataInit (jyjdRoute) {
      var newConditions = [{
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: [this.tjnf],
        prepender: 'AND'
      }, {
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }]
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_xkzrjs`, {conditions: newConditions}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let testData = []
          let chartDataMaps = [
            {
              'name': '城',
              'dataKey': 'value'
            },
            {
              'name': '镇',
              'dataKey': 'value1'
            },
            {
              'name': '乡',
              'dataKey': 'value2'
            }]

          let toolTip = this.baroption1.chartOption.tooltip
          let yAxis = this.baroption1.chartOption.yAxis
          let legend = this.baroption1.chartOption.legend // 控制 图例的显示
          // yAxis[0].max = 10000000000
          legend.show = true
          yAxis[0].axisLabel.color = '#fff'
          yAxis[0].type = 'log' // 自动适应刻度数值
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + datas.value + ': 1'
            return res
          }
          let xAxis = this.baroption1.chartOption.xAxis
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 40
          }
          pageInfo.list.forEach(el => {
            testData.push({
              name: el.xk,
              value: 0,
              value1: 0,
              value2: 0
            })
          })
          testData = this.$getArrListByname(testData)
          pageInfo.list.forEach(el => {
            testData.forEach(item => {
              if (el.xk === item.name) {
                if (el.qy === '城') {
                  item.value = !el.jssl ? 1 : (el.xssl / el.jssl).toFixed(0) - 0
                } else if (el.qy === '镇') {
                  item.value1 = !el.jssl ? 1 : (el.xssl / el.jssl).toFixed(0) - 0
                } else {
                  item.value2 = !el.jssl ? 1 : (el.xssl / el.jssl).toFixed(0) - 0
                }
              }
            })
          })
          this.baroption1.dataset = testData
          this.baroption1.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 20,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })
    },

    // 师生基础比例
    teachStuDataInit (tabName) {

      let a = ['幼儿园', '小学', '初中', '高中']
      var newConditions = [{
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: [this.tjnf],
        prepender: 'AND'
      }]
      if (tabName === '特殊') {
        newConditions = [{
          fieldName: 'tjnf',
          operator: 'IN',
          fieldValues: [this.tjnf],
          prepender: 'AND'
        }, {
          fieldName: 'jyjd',
          operator: 'IN',
          fieldValues: [tabName],
          prepender: 'AND'
        }]
        a=['特殊']
      }else if(tabName === '幼儿园'){
        newConditions = [{
          fieldName: 'tjnf',
          operator: 'IN',
          fieldValues: [this.tjnf],
          prepender: 'AND'
        }, {
          fieldName: 'jyjd',
          operator: 'IN',
          fieldValues: [tabName],
          prepender: 'AND'
        }]
        a=['幼儿园']
      }
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jdjcjyssb`, {
        conditions: newConditions,
        orderMethods: [{
          'field': 'jyjd',
          'method': 'ASC'
        }]
      }).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          // 点击时触发
          let toolTip = this.baroption1.chartOption.tooltip
          let xAxis = this.baroption1.chartOption.xAxis
          let yAxis = this.baroption1.chartOption.yAxis
          let legend = this.baroption1.chartOption.legend // 控制 图例的显示
          legend.show = true
          yAxis[0].type = 'value'
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 0
          }
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + datas.value + ': 1'
            return res
          }
          let testData = []
          let chartDataMaps = [
            {
              'name': '城',
              'dataKey': 'value'
            },
            {
              'name': '镇',
              'dataKey': 'value1'
            },
            {
              'name': '乡',
              'dataKey': 'value2'
            }]
          pageInfo.list.forEach(el => {
            testData.push({
              name: el.jyjd,
              value: 0,
              value1: 0,
              value2: 0
            })
          })
          // debugger
          testData = this.$getArrListByname(testData)
          pageInfo.list.forEach(el => {
            testData.forEach(item => {
              if (el.jyjd === item.name) {
                let ssbl = el.ssbl || 0
                if (el.qy === '城') {
                  item.value = (ssbl).toFixed(0) - 0
                } else if (el.qy === '镇') {
                  item.value1 = (ssbl).toFixed(0) - 0
                } else {
                  item.value2 = (ssbl).toFixed(0) - 0
                }
              }
            })
          })
          let dataseta = []
          // if(tabName!=='幼儿园'){
            a.forEach((itm) => {
              let b = testData.filter(it => it.name === itm)
              let name = itm
              if (itm === '幼儿园') {
                name = '学前'
              } else if (itm === '高中') {
                name = '高中'
              } else if (itm === '特殊') {
                name = '特殊教育'
              }
              if (b.length > 0) {
                dataseta.push({
                  name: name,
                  value: b[0].value,
                  value1: b[0].value1,
                  value2: b[0].value2
                })
              } else {
                dataseta.push({
                  name: name,
                  value: 0,
                  value1: 0,
                  value2: 0
                })
              }
            })
          // }else{
          // }

          this.baroption1.dataset = dataseta
          this.baroption1.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 20,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })
    },

    // 男女比例
    manGirdInit (jyjdRoute = '总计') {
      var newConditions = [{
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }, {
        fieldName: 'tjly',
        operator: 'IN',
        fieldValues: ['男女比例'],
        prepender: 'AND'
      }]
      let vm = this
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jsjdxlcznnbltj`, {conditions: newConditions, 'orderMethods': [{'field': 'tjnf', 'method': 'ASC'}]}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let dataset = []
          let sumData = []
          let tipNumList = []
          let colorList = this.baroption4.chartOption
          let legend = this.baroption4.chartOption.legend
          let yaxislabel = this.baroption4.chartOption.yAxis[0].axisLabel
          let toolTip = this.baroption4.chartOption.tooltip
          yaxislabel.formatter = '{value}' + '%'
          colorList.color = ['#1a8fff', '#ffe564', '#f76c7f']
          legend.bottom = 100
          toolTip.formatter = function (datas) {
            var res = ''
            tipNumList.forEach(el => {
              if (datas.name === el.name) {
                el.list.forEach(item => {
                  if (item.name === datas.seriesName) {
                    res = datas.marker + datas.name + '<br/>' + datas.seriesName + ':' + datas.value + '%' + '<br/>人数:' + vm.$reformNumber(item.sl) + '人'
                  }
                })
              }
            })
            return res
          }
          let chartDataMaps = [
            {
              'name': '男教师占比',
              'dataKey': 'value'
            },
            {
              'name': '女教师占比',
              'dataKey': 'value1'
            },
            {
              'name': '女教师占比(全国)',
              'dataKey': 'value2'
            }]
          if (this.titleNumFlag === 6) {
            chartDataMaps = [
              {
                'name': '男教师占比',
                'dataKey': 'value'
              },
              {
                'name': '女教师占比',
                'dataKey': 'value1'
              }]
          }
          pageInfo.list.forEach(el => {
            if (el.tjnf !== '2014' && el.tjnf !== '2015' && el.tjnf !== '2016') {
              dataset.push({
                name: el.tjnf + '年',
                value: 0,
                value1: 0,
                value2: 0
              })
              sumData.push({
                name: el.tjnf + '年',
                sumValue: 0
              })
              tipNumList.push({name: el.tjnf + '年', list: []})
            }
          })
          dataset = this.$getArrListByname(dataset)
          sumData = this.$getArrListByname(sumData)
          tipNumList = this.$getArrListByname(tipNumList)
          pageInfo.list.forEach(el => {
            sumData.forEach(item => {
              if (item.name === el.tjnf + '年' && el.tjlx !== "女教师占比（全国）"&& el.tjlx !== '女教师占比（全省）') {
                item.sumValue += el.sl
              }
            })
            tipNumList.forEach(ele => {
              if (el.tjnf + '年' === ele.name) {
                if (ele.name === el.tjnf + '年') {
                  if (el.tjlx === '男') {
                    ele.list.push({
                      name: '男教师占比',
                      sl: el.sl
                    })
                  } else if (el.tjlx === '女') {
                    ele.list.push({
                      name: '女教师占比',
                      sl: el.sl
                    })
                  } else if (el.tjlx === '女教师占比（全国）') {
                    ele.list.push({
                      name: '女教师占比(全国)',
                      sl: el.sl
                    })
                  }
                }
              }
            })
          })
          pageInfo.list.forEach(el => {
            dataset.forEach(item => {
              if (item.name === el.tjnf + '年') {
                if (el.tjlx === '男') {
                  item.value = (el.sl)
                } else if (el.tjlx === '女') {
                  item.value1 = (el.sl)
                } else if (el.tjlx === '女教师占比（全国）') {
                  item.value2 = (el.jsbl) // 后台直接返回百分比 可以直接使用
                }
              }
            })
          })
          dataset.forEach(el => {
            sumData.forEach(item => {
              if (item.name === el.name) {
                // el.value = (parseInt((el.value / item.sumValue) * 10000)) / 100
                // el.value1 = (parseInt((el.value1 / item.sumValue) * 10000)) / 100
                el.value = Math.round((el.value / item.sumValue) * 100)
                el.value1 = Math.round((el.value1 / item.sumValue) * 100)
              }
            })
          })
          this.baroption4.dataset = dataset
          this.baroption4.chartDataMaps = chartDataMaps.map((item, index) => {
            if (item.dataKey === 'value2') {
              return {
                ...item,
                type: 'line'
              }
            } else {
              return {
                ...item,
                type: 'bar',
                // stack: 'bar', // 由分开的柱状图 变为 堆状柱状图
                barMaxWidth: 22
              }
            }
          })
        }
      })
    },

    // 学历数据
    educationInit (jyjdRoute = '总计') {
      var newConditions = [{
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }, {
        fieldName: 'tjly',
        operator: 'IN',
        fieldValues: ['学历'],
        prepender: 'AND'
      }]
      let vm = this
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jsjdxlcznnbltj`, {conditions: newConditions, orderMethods: [{'field': 'tjnf', 'method': 'ASC'}]}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let yaxislabel = this.baroption2.chartOption.yAxis[0].axisLabel
          let toolTip = this.baroption2.chartOption.tooltip
          let tipNumList = []
          yaxislabel.formatter = '{value}' + '%'
          // 点击时触发
          toolTip.formatter = function (datas) {
            var res = ''
            tipNumList.forEach(el => {
              if (datas.name === el.name) {
                el.list.forEach(item => {
                  if (item.name === datas.seriesName) {
                    res = datas.marker + datas.name + '<br/>' + datas.seriesName + ':' + datas.value + '%' + '<br/>人数:' + vm.$reformNumber(item.sl) + '人'
                  }
                })
              }
            })
            return res
          }
          let dataset = []
          let sumData = []
          let chartDataMaps = [
            {
              'name': '研究生',
              'dataKey': 'value3'
            },
            {
              'name': '本科',
              'dataKey': 'value2'
            },
            {
              'name': '专科',
              'dataKey': 'value1'
            }, {
              'name': '高中阶段及以下',
              'dataKey': 'value'
            },
            {
              'name': '本科及以上(全省)',
              'dataKey': 'value4'
            },
            {
              'name': '本科及以上(全国)',
              'dataKey': 'value5'
            }]
          if (this.titleNumFlag === 6) {
            chartDataMaps = [
              {
                'name': '研究生',
                'dataKey': 'value3'
              },
              {
                'name': '本科',
                'dataKey': 'value2'
              },
              {
                'name': '专科',
                'dataKey': 'value1'
              }, {
                'name': '高中阶段及以下',
                'dataKey': 'value'
              }]
          }
          pageInfo.list.forEach(el => {
            if (el.tjnf !== '2014' && el.tjnf !== '2015' && el.tjnf !== '2016') {
              dataset.push({
                name: el.tjnf + '年',
                value: 0,
                value1: 0,
                value2: 0,
                value3: 0,
                value4: 0,
                value5: 0
              })
              sumData.push({
                name: el.tjnf + '年',
                sumValue: 0
              })
              tipNumList.push({name: el.tjnf + '年', list: []})
            }
          })
          dataset = this.$getArrListByname(dataset)
          sumData = this.$getArrListByname(sumData)
          tipNumList = this.$getArrListByname(tipNumList)
          pageInfo.list.forEach((el, index) => {
            sumData.forEach(item => {
              if (item.name === el.tjnf + '年' && el.tjlx !== '本科及以上（全省）' && el.tjlx !== '本科及以上（全国）') {
                item.sumValue += el.sl
              }
            })
            tipNumList.forEach(ele => {
              if (el.tjnf + '年' === ele.name) {
                if (el.tjlx === '高中阶段及以下') {
                  ele.list.push({
                    name: '高中阶段及以下',
                    sl: el.sl
                  })
                } else if (el.tjlx === '专科') {
                  ele.list.push({
                    name: '专科',
                    sl: el.sl
                  })
                } else if (el.tjlx === '本科') {
                  ele.list.push({
                    name: '本科',
                    sl: el.sl
                  })
                } else if (el.tjlx === '研究生') {
                  ele.list.push({
                    name: '研究生',
                    sl: el.sl
                  })
                } else if (el.tjlx === '本科及以上（全省）') {
                  ele.list.push({
                    name: '本科及以上(全省)',
                    sl: el.sl
                  })
                } else if (el.tjlx === '本科及以上（全国）') {
                  ele.list.push({
                    name: '本科及以上(全国)',
                    sl: el.sl
                  })
                }
              }
            })
          })
          pageInfo.list.forEach(el => {
            dataset.forEach(item => {
              if (item.name === el.tjnf + '年') {
                if (el.tjlx === '高中阶段及以下') {
                  item.value = (el.sl)
                } else if (el.tjlx === '专科') {
                  item.value1 = (el.sl)
                } else if (el.tjlx === '本科') {
                  item.value2 = (el.sl)
                } else if (el.tjlx === '研究生') {
                  item.value3 = (el.sl)
                } else if (el.tjlx === '本科及以上（全省）') {
                  item.value4 = (el.jsbl) // 全省全国的后台返回的是百分比 直接使用无需计算
                } else if (el.tjlx === '本科及以上（全国）') {
                  item.value5 = (el.jsbl) // 全省全国的后台返回的是百分比 直接使用无需计算
                }
              }
            })
          })

          dataset.forEach(el => {
            sumData.forEach(item => {
              if (item.name === el.name) {
                el.value = (parseInt((el.value / item.sumValue) * 10000)) / 100
                el.value1 = (parseInt((el.value1 / item.sumValue) * 10000)) / 100
                el.value2 = (parseInt((el.value2 / item.sumValue) * 10000)) / 100
                el.value3 = (parseInt((el.value3 / item.sumValue) * 10000)) / 100
              }
            })
          })
          this.baroption2.dataset = dataset
          this.baroption2.chartDataMaps = chartDataMaps.map((item, index) => {
            if (item.dataKey === 'value4' || item.dataKey === 'value5') {
              return {
                ...item,
                type: 'line',
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2
                    }
                  }
                }

              }
            } else {
              return {
                ...item,
                type: 'bar',
                stack: 'bar',
                barMaxWidth: 22
              }
            }
          })
        }
      })
    },

    // 教师变动
    teachChageInit (jyjdRoute = '总计') {
      var newConditions = [{
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }, {
        fieldName: 'tjly',
        operator: 'IN',
        fieldValues: ['教师变动'],
        prepender: 'AND'
      }, {
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: [this.tjnf],
        prepender: 'AND'
      }]
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jsjdbdtj`, {conditions: newConditions}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let sumreduceList = []
          if (pageInfo.list.length > 0) {
            sumreduceList = [{
              name: '减少',
              value: 0
            }, {
              name: '增加',
              value: 0
            }]
          }
          let sumList = []
          let reduceList = []
          let testData = []
          pageInfo.list.forEach(el => {
            if (el.bdlx === '增加') {
              sumreduceList[1].value += el.jssl
              sumList.push({
                name: el.bdly,
                value: el.jssl
              })
            } else {
              sumreduceList[0].value += el.jssl
              reduceList.push({
                name: el.bdly,
                value: el.jssl
              })
            }
          })
          this.reduceList = reduceList
          this.sumList = sumList
          testData[0] = sumreduceList
          testData[1] = this.sumList
          this.pjdata = testData
          this.pjdata.forEach((item, index) => {
            this.option.series[index].data = item
          })
        }
      })
    },

    // 年龄分布
    ageInit (jyjdRoute = '总计') {
      var newConditions = [{
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }, {
        fieldName: 'tjly',
        operator: 'IN',
        fieldValues: ['年龄分布'],
        prepender: 'AND'
      }]
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jsjdndltj`, {conditions: newConditions}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let dataSet = []
          let maxNum = []
          let dataName = []
          let dataYeat = [
            {
              'name': '2017年',
              'dataKey': 'value'
            },
            {
              'name': '2018年',
              'dataKey': 'value1'
            },
            {
              'name': '2019年',
              'dataKey': 'value2'
            }]
          // let toolTips = this.radar.chartOption.tooltip
          // toolTips.formatter = (params) => {
          // }
          pageInfo.list.forEach(el => {
            dataSet.push({
              name: el.nld,
              value: 0,
              value1: 0,
              value2: 0
            })
            dataName.push({
              name: el.nld,
              max: 3600
            })
            maxNum.push(el.jssl)
          })
          maxNum.sort(function (a, b) {
            return a - b
          })
          dataName = this.$getArrListByname(dataName)
          dataSet = this.$getArrListByname(dataSet)
          dataName.forEach(el => {
            el.max = maxNum[maxNum.length - 1]
          })
          pageInfo.list.forEach(el => {
            dataSet.forEach(item => {
              if (item.name === el.nld) {
                if (el.tjnf === '2017') {
                  item.value = el.jssl
                } else if (el.tjnf === '2018') {
                  item.value1 = el.jssl
                } else {
                  item.value2 = el.jssl
                }
              }
            })
          })
          let newDataName=[]
          let newDataSet=[]
          dataName.forEach(el=>{
            if(el.name==='29岁及以下'){
              newDataName[7]=el
            }else if(el.name==='30岁-34岁'){
              newDataName[6]=el
            }else if(el.name==='35岁-39岁'){
              newDataName[5]=el
            }else if(el.name==='40岁-44岁'){
              newDataName[4]=el
            }else if(el.name==='45岁-49岁'){
              newDataName[3]=el
            }else if(el.name==='50岁-54岁'){
              newDataName[2]=el
            }else if(el.name==='55岁-59岁'){
              newDataName[1]=el
            }else if(el.name==='60岁及以上'){
              newDataName[0]=el
            }
          })
          dataSet.forEach(el=>{
            if(el.name==='29岁及以下'){
              newDataSet[7]=el
            }else if(el.name==='30岁-34岁'){
              newDataSet[6]=el
            }else if(el.name==='35岁-39岁'){
              newDataSet[5]=el
            }else if(el.name==='40岁-44岁'){
              newDataSet[4]=el
            }else if(el.name==='45岁-49岁'){
              newDataSet[3]=el
            }else if(el.name==='50岁-54岁'){
              newDataSet[2]=el
            }else if(el.name==='55岁-59岁'){
              newDataSet[1]=el
            }else if(el.name==='60岁及以上'){
              newDataSet[0]=el
            }
          })
          this.radar.dataset = newDataSet
          this.radar.chartOption.radar.indicator = newDataName
          this.radar.chartDataMaps = dataYeat.map(item => {
            return {
              ...item,
              type: 'radar',
              areaStyle: {
                opacity: 0.3
              }
            }
          })
          this.radar.chartOption.tooltip = {
            formatter: function (params) {
              let tooltip = ''
              let dataTools=[]
              let value = params.name === '2017年' ? 'value' : params.name === '2018年' ? 'value1' : 'value2'
              dataSet.forEach(el => {
                if(el.name==='29岁及以下'){
                  dataTools[0]=el
                }else if(el.name==='30岁-34岁'){
                  dataTools[1]=el
                }else if(el.name==='35岁-39岁'){
                  dataTools[2]=el
                }else if(el.name==='40岁-44岁'){
                  dataTools[3]=el
                }else if(el.name==='45岁-49岁'){
                  dataTools[4]=el
                }else if(el.name==='50岁-54岁'){
                  dataTools[5]=el
                }else if(el.name==='55岁-59岁'){
                  dataTools[6]=el
                }else if(el.name==='60岁及以上'){
                  dataTools[7]=el
                }
              })
              dataTools.forEach(item=>{
                tooltip += item.name + ':   ' + item[value] + '<br>'
              })
              return params.name + '<br>' + tooltip
            }
          }
        }
      })
    },

    // 职称
    titleInit (jyjdRoute = '总计') {
      var newConditions = [{
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }, {
        fieldName: 'tjly',
        operator: 'IN',
        fieldValues: ['职称'],
        prepender: 'AND'
      }]
      let vm = this
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jsjdxlcznnbltj`, {conditions: newConditions, 'orderMethods': [{'field': 'tjnf', 'method': 'ASC'}]}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let yaxislabel = this.baroption3.chartOption.yAxis[0].axisLabel
          yaxislabel.formatter = '{value}' + '%'
          let colorList = this.baroption3.chartOption
          let toolTip = this.baroption3.chartOption.tooltip
          let tipNumList = []
          toolTip.formatter = function (datas) {
            var res = ''
            tipNumList.forEach(el => {
              if (datas.name === el.name) {
                el.list.forEach(item => {
                  if (item.name === datas.seriesName) {
                    res = datas.marker + datas.name + '<br/>' + datas.seriesName + ': ' + datas.value + '%' + '<br/>人数: ' + vm.$reformNumber(item.sl) + '人'
                  }
                })
              }
            })
            return res
          }
          colorList.color = ['#1a8fff', '#00e5fc', '#ffea81', '#83e6b7', '#10caa3', '#4b6aff', '#7e75f6', '#f96c7c']
          let dataset = []
          let sumData = []
          // let chartDataMaps = [
          //   {
          //     'name': '正高级',
          //     'dataKey': 'value5'
          //   },
          //   {
          //     'name': '副高级',
          //     'dataKey': 'value4'
          //   },
          //   {
          //     'name': '中级',
          //     'dataKey': 'value3'
          //   },
          //   {
          //     'name': '助理级',
          //     'dataKey': 'value2'
          //   },
          //   {
          //     'name': '员级',
          //     'dataKey': 'value1'
          //   }, {
          //     'name': '未定职级',
          //     'dataKey': 'value'
          //   },
          //   {
          //     'name': '中级及以上(全省)',
          //     'dataKey': 'value6'
          //   },
          //   {
          //     'name': '中级及以上(全国)',
          //     'dataKey': 'value7'
          //   }]
          let chartDataMaps = [
            {
              'name': '高级',
              'dataKey': 'value5'
            },
            {
              'name': '中级',
              'dataKey': 'value3'
            },
            {
              'name': '初级',
              'dataKey': 'value2'
            }, {
              'name': '未定职级',
              'dataKey': 'value'
            },
            {
              'name': '中级及以上(全省)',
              'dataKey': 'value6'
            },
            {
              'name': '中级及以上(全国)',
              'dataKey': 'value7'
            }]
          if (this.titleNumFlag === 6) {
            chartDataMaps = [
              {
                'name': '高级',
                'dataKey': 'value5'
              },
              {
                'name': '中级',
                'dataKey': 'value3'
              },
              {
                'name': '初级',
                'dataKey': 'value2'
              }, {
                'name': '未定职级',
                'dataKey': 'value'
              } ]
          }
          pageInfo.list.forEach(el => {
            if (el.tjnf !== '2014' && el.tjnf !== '2015' && el.tjnf !== '2016') {
              dataset.push({
                name: el.tjnf + '年',
                value: 0,
                value1: 0,
                value2: 0,
                value3: 0,
                value4: 0,
                value5: 0,
                value6: 0,
                value7: 0
              })
              sumData.push({
                name: el.tjnf + '年',
                sumValue: 0
              })
              tipNumList.push({name: el.tjnf + '年', list: []})
            }
          })
          dataset = this.$getArrListByname(dataset)
          sumData = this.$getArrListByname(sumData)
          tipNumList = this.$getArrListByname(tipNumList)
          pageInfo.list.forEach(el => {
            sumData.forEach(item => {
              if (item.name === el.tjnf + '年' && el.tjlx !== '中级及以上（全省）' && el.tjlx !== '中级及以上（全国）' && el.tjlx !== '助理级') {
                item.sumValue += el.sl
              }
            })
            // tipNumList.forEach(ele => {
            //   if (el.tjnf + '年' === ele.name) {
            //     if (el.tjlx === '未定职级') {
            //       ele.list.push({
            //         name: '未定职级',
            //         sl: el.sl
            //       })
            //     } else if (el.tjlx === '员级') {
            //       ele.list.push({
            //         name: '员级',
            //         sl: el.sl
            //       })
            //     } else if (el.tjlx === '助理级') {
            //       ele.list.push({
            //         name: '助理级',
            //         sl: el.sl
            //       })
            //     } else if (el.tjlx === '中级') {
            //       ele.list.push({
            //         name: '中级',
            //         sl: el.sl
            //       })
            //     } else if (el.tjlx === '副高级') {
            //       ele.list.push({
            //         name: '副高级',
            //         sl: el.sl
            //       })
            //     } else if (el.tjlx === '正高级') {
            //       ele.list.push({
            //         name: '正高级',
            //         sl: el.sl
            //       })
            //     } else if (el.tjlx === '中级及以上（全省）') {
            //       ele.list.push({
            //         name: '中级及以上(全省)',
            //         sl: el.sl
            //       })
            //     } else if (el.tjlx === '中级及以上（全国）') {
            //       ele.list.push({
            //         name: '中级及以上(全国)',
            //         sl: el.sl
            //       })
            //     }
            //   }
            // })
            tipNumList.forEach(ele => {
              if (el.tjnf + '年' === ele.name) {
                if (el.tjlx === '未定职级') {
                  ele.list.push({
                    name: '未定职级',
                    sl: el.sl
                  })
                } else if (el.tjlx === '初级') {
                  ele.list.push({
                    name: '初级',
                    sl: el.sl
                  })
                } else if (el.tjlx === '中级') {
                  ele.list.push({
                    name: '中级',
                    sl: el.sl
                  })
                } else if (el.tjlx === '高级') {
                  ele.list.push({
                    name: '高级',
                    sl: el.sl
                  })
                } else if (el.tjlx === '中级及以上（全省）') {
                  ele.list.push({
                    name: '中级及以上(全省)',
                    sl: el.sl
                  })
                } else if (el.tjlx === '中级及以上（全国）') {
                  ele.list.push({
                    name: '中级及以上(全国)',
                    sl: el.sl
                  })
                }
              }
            })
          })
          // pageInfo.list.forEach(el => {
          //   dataset.forEach(item => {
          //     if (item.name === el.tjnf + '年') {
          //       if (el.tjlx === '未定职级') {
          //         item.value = (el.sl)
          //       } else if (el.tjlx === '员级') {
          //         item.value1 = (el.sl)
          //       } else if (el.tjlx === '助理级') {
          //         item.value2 = (el.sl)
          //       } else if (el.tjlx === '中级') {
          //         item.value3 = (el.sl)
          //       } else if (el.tjlx === '副高级') {
          //         item.value4 = (el.sl)
          //       } else if (el.tjlx === '正高级') {
          //         item.value5 = (el.sl)
          //       } else if (el.tjlx === '中级及以上（全省）') {
          //         item.value6 = (el.jsbl) // 全省全国的后台返回的是百分比 可以直接使用
          //       } else if (el.tjlx === '中级及以上（全国）') {
          //         item.value7 = (el.jsbl) // 全省全国的后台返回的是百分比 可以直接使用
          //       }
          //     }
          //   })
          // })
          pageInfo.list.forEach(el => {
            dataset.forEach(item => {
              if (item.name === el.tjnf + '年') {
                if (el.tjlx === '未定职级') {
                  item.value = (el.sl)
                } else if (el.tjlx === '初级') {
                  item.value2 = (el.sl)
                } else if (el.tjlx === '中级') {
                  item.value3 = (el.sl)
                } else if (el.tjlx === '高级') {
                  item.value5 = (el.sl)
                } else if (el.tjlx === '中级及以上（全省）') {
                  item.value6 = (el.jsbl) // 全省全国的后台返回的是百分比 可以直接使用
                } else if (el.tjlx === '中级及以上（全国）') {
                  item.value7 = (el.jsbl) // 全省全国的后台返回的是百分比 可以直接使用
                }
              }
            })
          })
          dataset.forEach(el => {
            sumData.forEach(item => {
              if (item.name === el.name) {
                el.value = (parseInt((el.value / item.sumValue) * 10000)) / 100
                el.value1 = (parseInt((el.value1 / item.sumValue) * 10000)) / 100
                el.value2 = (parseInt((el.value2 / item.sumValue) * 10000)) / 100
                el.value3 = (parseInt((el.value3 / item.sumValue) * 10000)) / 100
                el.value4 = (parseInt((el.value4 / item.sumValue) * 10000)) / 100
                el.value5 = (parseInt((el.value5 / item.sumValue) * 10000)) / 100

                // el.value6 = (el.value6 / item.sumValue).toFixed(2) * 100
                // el.value7 = (el.value7 / item.sumValue).toFixed(2) * 100
              }
            })
          })
          this.baroption3.dataset = dataset
          this.baroption3.chartDataMaps = chartDataMaps.map((item, index) => {
            if (item.dataKey === 'value6' || item.dataKey === 'value7') {
              return {
                ...item,
                type: 'line',
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2
                    }
                  }
                }
              }
            } else {
              return {
                ...item,
                type: 'bar',
                stack: 'bar',
                barMaxWidth: 22
              }
            }
          })
        }
      })
    },

    // 增加减少切换
    pieselectchanged (param) {
      let vm = this
      if (param.type === 'pieselectchanged' && param.name === '增加') {
        vm.option.series[1].data = this.sumList
      } else if (param.type === 'pieselectchanged' && param.name === '减少') {
        vm.option.series[1].data = this.reduceList
      }
    },

    // 专任教师的动态数据
    teachInitData () {
      var newConditions = [{
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: [this.tjnf],
        prepender: 'AND'
      }]
      let vm = this
      vm.$axios.post(`/tw-cloud-datatheme-server/themedata/app_sy_zrjssltj`, {conditions: newConditions}).then((resp) => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let teachList = [{
            id: 1,
            label: '全部',
            value: 0,
            labelName: '总计'
          }, {
            id: 2,
            label: '学前教育',
            value: 0,
            labelName: '幼儿园'
          }, {
            id: 3,
            label: '小学教育',
            value: 0,
            labelName: '小学'
          }, {
            id: 4,
            label: '初中教育',
            value: 0,
            labelName: '初中'
          }, {
            id: 5,
            label: '普高教育',
            value: 0,
            labelName: '高中'
          }]
          let authList = []
          pageInfo.list.forEach((el, index) => {
            if (el.jyjb !== '特殊教育') {
              if (el.jyjb === '总计') {
                authList.push({
                  label: '全部教育阶段',
                  value: this.$reformNumber(el.jssl),
                  id: index,
                  labelName: '总计'
                })
              } else if (el.jyjb === '幼儿园') {
                authList.push({
                  label: '学前阶段',
                  value: this.$reformNumber(el.jssl),
                  id: index,
                  labelName: '幼儿园'
                })
              } else {
                authList.push({
                  label: el.jyjb + '阶段',
                  value: this.$reformNumber(el.jssl),
                  id: index,
                  labelName: el.jyjb
                })
              }
            }
          })
          teachList.forEach(el => {
            authList.forEach(item => {
              if (el.labelName === item.labelName) {
                el.value = item.value
              }
            })
          })
          this.hero = teachList
        }
      }).catch((err) => {
        console.log(err)
      })
    }

  }
}
</script>

<style lang="scss">
.teach-message-title{
  margin-bottom: 20px;
  height: auto;
  text-align: center;
  li{
    background-color: rgba(0,93,255,0.31);
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    display: inline-block;
    min-width: 180px;
    min-height: 80px;
    line-height: 40px;
    margin-right: 20px;
    .xlabel {
      font-size: 20px;
    }
  }
}
.teach-message-active{
  border: 2px solid #015cff;
  box-shadow: inset 0px 1px 15px 4px #015cff;
}
.teach-message-number{
  font-size: 30px;
  color:#06ffff;
  vertical-align: baseline;
  font-family: 'customer';
}
</style>
